<template>
  <div class="order-list">
    <!-- 导航 -->
    <van-nav-bar title="我的订单" class="myOrder">
      <i
        class="icon-home iconfont f18"
        slot="left"
        @click="$router.push('/')"
      ></i>
    </van-nav-bar>
    <!-- 标签栏 --> 
    <van-sticky>
      <van-tabs>
        <van-tab title="全部" name="all"></van-tab>
        <van-tab title="待付款" name="wait"></van-tab>
        <van-tab title="待发货" name="send"></van-tab>
        <van-tab title="已取消" name="cancel"></van-tab>
      </van-tabs>
    </van-sticky>

    <!-- 商品详情 -->
    <div class="list">
      <div class="item">
        <div class="card pl-15 pr-15 pb-15">
          <div class="flex jc-sb aic" style="height: 100px">
            <p class="img-box">
              <img
                src="https://mall.s.maizuo.com/c3797b5e9dab17cb3e1c56547ba7d406.png"
                alt=""
                class="img"
              />
            </p>
            <div class="desc flex2 jc-sb fg1" style="height: 68px">
              <p class="f14 lh15" style="width: 200px">【云南】冰糖心丑苹果</p>
              <p class="flex jc-sb">
                <span class="flex aic"
                  ><span class="f10">￥</span><span>39.90</span></span
                ><span class="f999 f14">x 1</span>
              </p>
            </div>
          </div>
          <div class="flex jc-sb aic" style="height: 100px; display: none">
            <p class="img-box flex">
              <img
                src="https://mall.s.maizuo.com/c3797b5e9dab17cb3e1c56547ba7d406.png"
                alt=""
                class="img"
              />
            </p>
            <i
              class="van-icon van-icon-arrow"
              style="color: rgb(153, 153, 153)"
            ></i>
          </div>
          <div slot="footer" class="border-line" style="height: 40px">
            <p class="flex jc-e aic" style="line-height: 40px">
              <span class="mr-10 f14">共1件商品</span
              ><span class="f14">
                实付
                <span class="red">￥49.90</span></span
              >
            </p>
          </div>
          <div class="margin-top flex jc-sb aic">
            <span class="flr">订单状态: 已取消</span
            ><button
              class="buttosize van-button van-button--default van-button--small"
            >
              <div class="van-button__content">
                <span class="van-button__text">重新购买</span>
              </div>
            </button>
          </div>
        </div>
        <div style="background: rgb(244, 244, 244); height: 10px"></div>
      </div>
      <div class="item">
        <div class="card pl-15 pr-15 pb-15">
          <div class="flex jc-sb aic" style="height: 100px; display: none">
            <p class="img-box">
              <img
                src="https://mall.s.maizuo.com/86d8414272e50b4b9a7b185ac30dfc86.png"
                alt=""
                class="img"
              />
            </p>
            <div class="desc flex2 jc-sb fg1" style="height: 68px">
              <p class="f14 lh15" style="width: 200px">【山东】金秋红蜜桃</p>
              <p class="flex jc-sb">
                <span class="flex aic"
                  ><span class="f10">￥</span><span>57.80</span></span
                ><span class="f999 f14">x 1</span>
              </p>
            </div>
          </div>
          <div class="flex jc-sb aic" style="height: 100px; display: none">
            <p class="img-box">
              <img
                src="https://mall.s.maizuo.com/9aba9f63c14a9aa7d469b62a0f9cde41.png"
                alt=""
                class="img"
              />
            </p>
            <div class="desc flex2 jc-sb fg1" style="height: 68px">
              <p class="f14 lh15" style="width: 200px">
                【山西】红富士苹果 8-10枚5斤装（果径80mm/枚）
              </p>
              <p class="flex jc-sb">
                <span class="flex aic"
                  ><span class="f10">￥</span><span>34.80</span></span
                ><span class="f999 f14">x 1</span>
              </p>
            </div>
          </div>
          <div class="flex jc-sb aic" style="height: 100px">
            <p class="img-box flex">
              <img
                src="https://mall.s.maizuo.com/86d8414272e50b4b9a7b185ac30dfc86.png"
                alt=""
                class="img"
              /><img
                src="https://mall.s.maizuo.com/9aba9f63c14a9aa7d469b62a0f9cde41.png"
                alt=""
                class="img"
              />
            </p>
            <i
              class="van-icon van-icon-arrow"
              style="color: rgb(153, 153, 153)"
            ></i>
          </div>
          <div slot="footer" class="border-line" style="height: 40px">
            <p class="flex jc-e aic" style="line-height: 40px">
              <span class="mr-10 f14">共2件商品</span
              ><span class="f14">
                实付
                <span class="red">￥102.60</span></span
              >
            </p>
          </div>
          <div class="margin-top flex jc-sb aic">
            <span class="flr">订单状态: 已取消</span
            ><button
              class="buttosize van-button van-button--default van-button--small"
            >
              <div class="van-button__content">
                <span class="van-button__text">重新购买</span>
              </div>
            </button>
          </div>
        </div>
        <div style="background: rgb(244, 244, 244); height: 10px"></div>
      </div>
      <div class="item">
        <div class="card pl-15 pr-15 pb-15">
          <div class="flex jc-sb aic" style="height: 100px; display: none">
            <p class="img-box">
              <img
                src="https://mall.s.maizuo.com/c8ae4728163788cda4147e1ed8c44409.png"
                alt=""
                class="img"
              />
            </p>
            <div class="desc flex2 jc-sb fg1" style="height: 68px">
              <p class="f14 lh15" style="width: 200px">
                【云南】实建褚橙 10斤装 （95-135g/枚）
              </p>
              <p class="flex jc-sb">
                <span class="flex aic"
                  ><span class="f10">￥</span><span>98.00</span></span
                ><span class="f999 f14">x 1</span>
              </p>
            </div>
          </div>
          <div class="flex jc-sb aic" style="height: 100px; display: none">
            <p class="img-box">
              <img
                src="https://mall.s.maizuo.com/9aba9f63c14a9aa7d469b62a0f9cde41.png"
                alt=""
                class="img"
              />
            </p>
            <div class="desc flex2 jc-sb fg1" style="height: 68px">
              <p class="f14 lh15" style="width: 200px">
                【山西】红富士苹果 8-10枚5斤装（果径80mm/枚）
              </p>
              <p class="flex jc-sb">
                <span class="flex aic"
                  ><span class="f10">￥</span><span>34.80</span></span
                ><span class="f999 f14">x 2</span>
              </p>
            </div>
          </div>
          <div class="flex jc-sb aic" style="height: 100px">
            <p class="img-box flex">
              <img
                src="https://mall.s.maizuo.com/c8ae4728163788cda4147e1ed8c44409.png"
                alt=""
                class="img"
              /><img
                src="https://mall.s.maizuo.com/9aba9f63c14a9aa7d469b62a0f9cde41.png"
                alt=""
                class="img"
              />
            </p>
            <i
              class="van-icon van-icon-arrow"
              style="color: rgb(153, 153, 153)"
            ></i>
          </div>
          <div slot="footer" class="border-line" style="height: 40px">
            <p class="flex jc-e aic" style="line-height: 40px">
              <span class="mr-10 f14">共3件商品</span
              ><span class="f14">
                实付
                <span class="red">￥167.60</span></span
              >
            </p>
          </div>
          <div class="margin-top flex jc-sb aic">
            <span class="flr">订单状态: 已取消</span
            ><button
              class="buttosize van-button van-button--default van-button--small"
            >
              <div class="van-button__content">
                <span class="van-button__text">重新购买</span>
              </div>
            </button>
          </div>
        </div>
        <div style="background: rgb(244, 244, 244); height: 10px"></div>
      </div>
    </div>
  </div>
</template>
 
<style lang="less">
@import "./list.less";
</style>